import React from 'react'
import { useAppDispatch, useAppSelector } from '../../app/hooks'
import './style.scss'
import { Stepper, SubmitBar, Checkbox, Button, SwipeCell } from 'react-vant'
import { Navigate, useNavigate } from 'react-router-dom'
import { useCar } from '../../hooks'
import { addCarCount, deleteCar, subCarCount, switchIsCheck, } from '../../app/car/carSlice'
const Index: React.FC = () => {
	const carList = useAppSelector(state => state.car.carList)
	const navigate = useNavigate()
	const dispatch = useAppDispatch()
	const { selectTotalPrice } = useCar()
	return (
		<div className='shop-car'>
			<div>
				{
					carList.map(v => {
						return (
							<SwipeCell
								rightAction={
									<Button onClick={() => dispatch(deleteCar(v))} style={{ height: '100%' }} square type="danger">
										删除
									</Button>
								}
							>
								<div key={v.id} className="car-item">
									<div>
										<Checkbox checked={v.isChecked} onChange={() => dispatch(switchIsCheck(v))} />
									</div>
									<div>
										<dl>
											<dt>
												<img src={v.url} alt="" />
											</dt>
											<dd style={{ padding: 4 }}>
												<h3>{v.title}</h3>
												<div>{v.desc}</div>
												<div>
													<span>￥: {v.price}</span>
													<Stepper
														defaultValue={v.count}
														min={1}
														onPlus={() => dispatch(addCarCount(v))}
														onMinus={() => dispatch(subCarCount(v))}
													></Stepper>
												</div>
											</dd>
										</dl>
									</div>
								</div>
							</SwipeCell>

						)
					})
				}
			</div>

			<SubmitBar
				price={selectTotalPrice * 100}
				buttonText="提交订单"
				onSubmit={() => navigate('/payment')}
			>
				<Checkbox>全选</Checkbox>
			</SubmitBar>
		</div>
	)
}

export default Index